<template>
  <div>
    <div class="tab-control">
      <div class="title-box">
        <div class="tab-title">开通会员</div>
        <div class="tab-num">已有<span>{{vipInfo.vip_count}}人</span>开通</div>
      </div>
      <ul class="control-box">
        <li class="control-list" v-for="(item,index) in list" :key="index" @click="itemClick(item.vip_level)" :class="[currentIndex == item.vip_level ? 'control-list-active' : '']">
          <div class="member-day">{{item.expiry_time}}天VIP会员</div>
          <div class="member-return">赠送{{item.total}}代币</div>
          <div>
            <div class="member-money"><span>¥</span>{{item.total}}</div>
            <div class="member-expect">预计省{{item.preferential_amount}}元</div>
          </div>
          <div class="rate">
            <span v-if="index == 0">活动价</span>
            <span v-else-if="index == 1">推荐</span>
            <span v-else-if="index == 2">活动价</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>

export default {
  props: {
    vipInfo: {
      type: Object,
      default() {
        return {}
      }
    },
  },
  data() {
    return {
      currentIndex: 3,
    }
  },
  created() {
    this.$emit('item-click',this.currentIndex)
  },
  methods: {
    itemClick(index) {
      this.currentIndex = index
      this.$emit('item-click',this.currentIndex)
    },
  },
  computed: {
    list() {
      if (this.vipInfo) {
        var arr = this.vipInfo.amount_arr
        if (Array.isArray(arr)) {
          arr.shift()
        }
        return arr
      }
    }
  }
}
</script>

<style scoped>
.tab-control {
  width: 10rem;
  height: 8.36rem;
  margin-top: .266667rem;
  background: #FFFFFF;
}

.title-box {
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 10rem;
  padding: .4rem .266667rem .266667rem .4rem;
}

.tab-title {
  position: relative;
  font-size: .48rem;
  font-weight: 800;
  line-height: .666667rem;
  color: #222222;
  text-indent: .213333rem;
}

.tab-title::before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: .08rem;
  height: .4rem;
  background: #222222;
  border-radius: .04rem;
}

.tab-num {
  font-size: .346667rem;
  font-weight: 400;
  line-height: .493333rem;
  color: #999999;
}

.tab-num span {
  color: #FF2B2B;
}

.control-box {
  box-sizing: border-box;
  padding: 0 .426667rem;
  display: flex;
  height: 6.453333rem;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.control-list {
  box-sizing: border-box;
  padding: .266667rem;
  position: relative;
  overflow: hidden;
  text-align: center;
  width: 9.146667rem;
  height: 1.973333rem;
  background: #fff;
  border-radius: .186667rem;
  display: flex;
  align-items: center;
  border: .053333rem solid #ddd;
}

.control-list-active {
  width: 9.146667rem;
  height: 1.973333rem;
  background: #FFFCF2;
  box-sizing: border-box;
  border: .053333rem solid #DC8D0B;
  box-shadow: 0px .04rem .08rem rgba(109, 76, 58, 0.4);
}

.rate {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0 .133333rem;
  height: .453333rem;
  background: #FF1414;
  border-radius:  0 0 .266667rem 0 ;
  font-size: .32rem;
  font-weight: 500;
  line-height: .44rem;
  color: #FFFFFF;
  text-align: center;
}

.member-day {
  font-size: .48rem;
  font-weight: 800;
  line-height: .666667rem;
  text-align: left;
  color: #333333;
}

.member-money {
  font-size: .96rem;
  font-weight: 800;
  color: #EB9B40;
}

.member-money span {
  font-size: .4rem;
}

.member-expect {
  font-size: .32rem;
  font-weight: 500;
  line-height: .44rem;
  color: #FF1414;
}

.member-return {
  width: 2.133333rem;
  height: .56rem;
  background: #FFB43A;
  border-radius: .053333rem;
  font-size: .32rem;
  text-align: .56rem;
  font-weight: 500;
  line-height: .56rem;
  color: #FFFFFF;
  margin: .133333rem auto;
}
</style>